<template>
  <DetailBox :title="getRouteTitle()" :border="2">
    <template #center>
      <slot name="center">

        <el-row :gutter="12">
          <el-col :span="5">
            <ContentBox :title="'部门列表'" :border="3" :marginHeight="260">
              <template #center>
                <slot name="center">
                  <ZTree @eSaveNodes="onSaveNodes" v-bind="state"/>
                </slot>
              </template>
            </ContentBox>
          </el-col>
          <el-col :span="19">
            <ContentBox :title="'用户信息'" :border="3" :marginHeight="260" :is-detail="true" :detail-title="'新增'"
                        @click-a="addOrEdit(null, 'add')">
              <template #center>
                <slot name="center">
                  <ZTable
                      class="complexTable"
                      :tableData="tableData"
                      :tableDataHeader="tableDataHeader"
                      @deleteRow="deleteRow"
                      @editRow="edit"
                      @detailRow="detail"
                      @TSelected="Select"
                  >
                  </ZTable>
                  <el-pagination class="tablePagination"
                                 background
                                 v-model:currentPage="currentPage" :page-size="pageSize"
                                 :page-sizes="[15, 30, 45, 60]"
                                 layout="sizes, prev, pager, next" :total="100" @size-change="handleSizeChange"
                                 @current-change="handleCurrentChange"></el-pagination>
                </slot>
              </template>
            </ContentBox>

          </el-col>
        </el-row>


      </slot>
    </template>
  </DetailBox>

  <el-dialog class="Z" v-model="dialogFormVisible" :title="formTitle">

    <ZForm ref="newFormRef"
           :formList="formList"
           :formRules="formRules"
           :label-width="formLabelWidth"
           :form-data="form"
           @uData="setFormData"
           :isClose="dialogFormVisible"
           :isSubmit="isSubmit"
           :isEdit="false"
    >

      <template v-slot:formItem-xxx="{ item, formData }">
        <!-- 这里可以插入任何自定义内容，比如额外的按钮或信息 -->
        <div>
          <p>这是第一个表单项的自定义内容。</p>
<!--          <el-button @click="handleCustomClick(item, formData)">自定义按钮</el-button>-->
        </div>
      </template>
    </ZForm>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="save"
        >保存</el-button>
      </span>
    </template>
  </el-dialog>

</template>

<script setup lang="ts">
import {reactive, type Ref, ref, watch} from 'vue';
import DetailBox from "@/views/components/DetailBox.vue";
import ContentBox from "@/views/components/ContentBox.vue";
import {ElTree} from 'element-plus'
import {getRouteTitle} from "@/utils";
import ZTree from "@/views/components/ZTree/index.vue"
import ZTable from "@/views/components/table/ZTable/index.vue";
import {data} from "@/views/example/table/custom-table/data.ts";

import ZForm from '@/views/components/ZForm/index.vue'

interface Tree {
  id: number
  label: string
  children?: Tree[]
}

const filterText = ref('')
const treeRef = ref<InstanceType<typeof ElTree>>()

const defaultProps = {
  children: 'children',
  label: 'label',
}

watch(filterText, (val) => {
  treeRef.value!.filter(val)
})

const state = reactive({
  treeData: [
    {
      id: 1,
      label: '一级 1一级一级一级一级一级一级一级一级一级一级一级一级',
      disabled: true,
      children: [
        {
          id: 4,
          label: '二级 1-1',
          disabled: null,

          children: [
            {
              id: 9,
              label: '三级 1-1-1',
            },
            {
              id: 10,
              label: '三级 1-1-2',
            },
          ],
        },
      ],
    },
    {
      id: 2,
      label: '一级 2',
      children: [
        {
          id: 5,
          label: '二级 2-1',
        },
        {
          id: 6,
          label: '二级 2-2',
        },
      ],
    },
    {
      id: 3,
      label: '一级 3',
      children: [
        {
          id: 7,
          label: '二级 3-1',
        },
        {
          id: 8,
          label: '二级 3-2',
        },
      ],
    },
    {
      id: 1,
      label: '一级 1一级一级一级一级一级一级一级一级一级一级一级一级',
      disabled: true,
      children: [
        {
          id: 4,
          label: '二级 1-1',
          disabled: null,

          children: [
            {
              id: 9,
              label: '三级 1-1-1',
            },
            {
              id: 10,
              label: '三级 1-1-2',
            },
          ],
        },
      ],
    },
    {
      id: 2,
      label: '一级 2',
      children: [
        {
          id: 5,
          label: '二级 2-1',
        },
        {
          id: 6,
          label: '二级 2-2',
        },
      ],
    },
    {
      id: 3,
      label: '一级 3',
      children: [
        {
          id: 7,
          label: '二级 3-1',
        },
        {
          id: 8,
          label: '000000000000000000000',
        },
      ],
    },
    {
      id: 4,
      label: '一级 3',
      children: [
        {
          id: 7,
          label: '二级 3-1',
        },
        {
          id: 8,
          label: '222222',
        },
      ],
    },
    {
      id: 5,
      label: '一级 3',
      children: [
        {
          id: 7,
          label: '二级 3-1',
        },
        {
          id: 8,
          label: '注意不要遮挡数据，底部要展示出来-----------------------------------------',
        },
      ],
    },
  ],
  isOperator: [
    'add',
    'delete',
    'search',
  ],
});

function onSaveNodes(data: Tree) {
  console.log(data);
}


const tableData: Ref<Array> = ref(data.tableData)
const tableDataHeader = ref(data.tableDataHeader)
const deleteRow = (row: any, index: number) => {
  tableData.value.splice(index, 1)
  console.log('this tableData: ', tableData)
  // pagenation.value.total = tableData.value.length
}


const formList = [
  {label: '名称：', type: 'input', span: 12, valueKey: 'name', isRequire: true, placeholder: '请输入名称'},
  {label: '日期：', type: 'dateTime', span: 12, valueKey: 'date', placeholder: '选择日期'},
  {label: '文件：', type: 'files', isRequire: true,span: 12, valueKey: 'file', placeholder: '选择文件'},
  {label: 'xxx：', span: 12, valueKey: 'xxx'},
  {
    label: '类型：', type: 'select', span: 12, valueKey: 'type', options: [
      {label: '第一', value: 1},
      {label: '第2', value: 2},
      {label: '第3', value: 3},
    ]
  },
]

const formRules = {
  name: [{required: true, message: '校验信息', trigger: 'blur'}],
  date: [{required: true, message: '校验信息', trigger: 'blur'}],
}

const valid = ref(false)
const setFormData = (args) => {
  valid.value = args.valid
  // 这里一定要增加否则再次点击将无反应
  isSubmit.value = false
}

const edit = (row, index) => {
  // console.log('row: ', row, index)
  addOrEdit(row)
  // console.log(form)
}
const detail = (row, index) => {
  // console.log('row: ', row, index)
}

/*
表格新增编辑操作
* */
const resetState = (state) => {
  for (const key in state) {
    if (state.hasOwnProperty(key)) {
      state[key] = null;
    }
  }
}

const Select = (val) => {
  console.log(val, 1)
}

const dialogFormVisible = ref(false)
const formTitle = ref('新增')

const formLabelWidth = 140

const form = reactive({
  name: '',
  date: '',
  type: '',
  file: {
    raw: null
  }
})

const addOrEdit = (row = null, str = '') => {
  if (str === 'add') {
    formTitle.value = '新增'
    resetState(form)
  } else {
    formTitle.value = '编辑'
    Object.assign(form, row)
  }
  dialogFormVisible.value = true
}

const isSubmit = ref(false);
const save = () => {
  console.log(form)
  isSubmit.value = true
  dialogFormVisible.value = true
}

const currentPage = ref<number>(1) //当前页
const pageSize = ref<number>(15) //每页大小

const handleGetArticleList = async () => {
  // loading.value = true
  // const res = await getArticleList({page: currentPage.value, limit: pageSize.value})
  // const {code, data} = res.data
  // if (code === 10000) {
  //   article.value = data.items
  // }
  // loading.value = false
}

/**
 * @desc:设置显示条数
 * @param {number} size 显示条数
 */
const handleSizeChange = (size: number) => {
  pageSize.value = size
  handleGetArticleList()
}
/**
 * @desc:设置当前页数
 * @param {number} page 页数
 */
const handleCurrentChange = (page: number) => {
  currentPage.value = page
  handleGetArticleList()
}

</script>

<style lang="scss" scoped>

.complexTable {
  height: calc(100% - 30px);
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 10px;
}

.tablePagination {
  justify-content: center;
  //margin-top: -10px;
}
</style>
